<template>
	<view class="navbar  ">
		<view class="navbar-fixed" :style="{background:bgStyle,backgroundSize:'100% 100%'}">
			<!-- 状态栏小程序撑起高度 -->
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="navbar-content" :style="{height:navBarHeight+'px',width:windowWidth+'px'}">
				<view class="navbar-search" @tap="event" :style="{background:searchBoxStyle}">
					<icon :type="inputIcon.type" class="navbar-search_icon" :size="inputIcon.size" :color="inputIcon.color"></icon>
					<view class="navbar-serach">
						<text class="navbar-search_text">{{placeholder}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）-->
		<view :style="{height:statusBarHeight+navBarHeight+'px'}"></view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		name:'x-navBar', // 顶部导航 必须依赖于vuex中的导航信息
		props:{
			clickFun:{ // 点击搜索后执行的回调,如果传了routerPath此函数不在被执行
				type:Function,
				default:function (){}
			},
			routerPath:{
				type:String,
				default:''
			},
			inputIcon:{ // 搜索图标
				type:Object,
				default:{
					type:'search', // type必须是icon组件的type
					size:'16',
					color:'#999' // css-color
				}
			},
			placeholder:{
				type:String,
				default:'请输入你想搜索的内容'
			},
			searchBoxStyle:{ // 搜索框背景色
				type:String,
				default:'#E9E9E9'
			},
			navStyle:{ // 整个导航栏背景
				type:Object,
				default:{
					type:1, //背景类型 1背景色 2背景图
					image:'../../static/title-bg.jpg',
					color:'#fff'
				}
			}
		},
		data() {
			return {
				
			};
		},
		computed:{
			...mapGetters(['statusBarHeight','navBarHeight','windowWidth']),
			bgStyle(){
				if(this.navStyle.type==2){
					return `url(${this.navStyle.image || '../../static/title-bg.jpg'}) no-repeat`
				}else{
					return this.navStyle.color || '#70D5BF'
				}
			}
		},
		methods: {
			event(e) {
				console.log('点击搜索');
				if(this.routerPath){
					uni.navigateTo({
						url:this.routerPath
					})
					return
				}
				if(this.clickFun){
					this.clickFun(e)
				}
			},
				
		},
		onLoad() {
			
		},
		onReady() {
			// var data=this.NavigationData()
			// console.log(data)
			// this.statusBarHeight=data.statusBarHeight
			// this.navBarHeight=data.navBarHeight
			// this.windowWidth=data.windowWidth
			
		}
	}
</script>


<style lang="scss">
	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			.navbar-content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-right: 40rpx;
				padding-left: 29rpx;
				box-sizing: border-box;
				.navbar-search {
					display: flex;
					align-items: center;
					// justify-content: center;
					padding: 0 10px;
					width: 100%;
					height: 30px;
					border-radius: 30px;
					background: #E9E9E9;
					.navbar-search_icon {
						// width: 10px;
						// height: 10px;
						margin-right: 8px;
					}

					.navbar-search_text {
						// width: 100%;
						font-size: 14px;
						color: #999;
					}
				}

				&.search {
					padding-left: 0;

					.navbar-content__search-icons {
						margin-left: 10px;
						margin-right: 10px;
					}

					.navbar-search {
						border-radius: 5px;
					}
				}
			}

		}

	}
</style>
